<template>
  <div class="cms-buy" :class="`style_${type}`">
    <div class="title" v-if="!noHeader">{{ type === 1 ? '视频' : '小说/图集' }}购买</div>
    <div class="video" :class="noHeader ? 'mt-0' : ''">
      <div v-if="type === 1" class="w-[375px] h-10 pl-4 pt-2">
        <left-outlined />
      </div>
      <div v-if="type === 2" class="header">
        <span class="text-base font-medium text-[#000] leading-10">订购</span>
        <close-outlined class="text-[#4B5363] self-center" />
      </div>
      <div class="flex flex-col flex-1 text-center mt-[36px]">
        <p class="tips">本{{ type === 1 ? '片' : titleType ? titleType : '图集' }}为VIP会员专享内容</p>
        <p class="sub-tips mt-2">
          {{ type === 1 ? '观看' : '阅读' }}请开通VIP会员或单独购买{{ type === 1 ? '本片' : '' }}
        </p>

        <div class="flex justify-center gap-x-6 mt-6">
          <div class="coin-btn">
            <dollar-circle-outlined class="coin-icon" />
            <span class="charge">100购买</span>
          </div>
          <div class="buy-btn">购买VIP会员</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import cmsBuyOrderProps from './props'
import { LeftOutlined, DollarCircleOutlined, CloseOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsBuyOrderProps,
  data() {
    return {
      baseUrl: '/src/components/cms/components/'
    }
  },
  components: {
    LeftOutlined,
    DollarCircleOutlined,
    CloseOutlined
  }
})
</script>
<style scoped lang="less">
.cms-buy {
  width: 375px;
  background-color: #fff;
}
.title {
  padding-top: 8px;
  font-size: 12px;
  color: #4a4a4a;
  letter-spacing: 0;
  background-color: #fff;
  font-weight: 400;
  padding-left: 16px;
}
.video {
  width: 375px;
  margin-top: 12px;

  background: #000;
  height: 211px;
  @apply relative flex flex-col;
}
.tips {
  width: 375px;
  @apply text-sm text-[#e1c781];
}
.sub-tips {
  @apply text-xs text-white opacity-60;
}
&.style_1 {
  .coin-btn {
    width: 120px;
    height: 32px;
    border-radius: 32px;
    color: #ad810d;
    border: 1px solid #ad810d;
    .coin-icon {
      color: #ad810d;
    }
    .charge {
      line-height: 32px;
    }
  }
  .buy-btn {
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    font-size: 12px;
    color: #000;
    background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
  }
}
&.style_2 {
  .video {
    width: 375px;
    background: #fff;
    height: 211px;
    margin-top: 12px;
    @apply relative flex flex-col;
  }
  .header {
    width: 375px;
    height: 40px;
    background-image: linear-gradient(180deg, #fff5de 0%, #ffffff 100%);
    @apply flex justify-between pl-4 pr-5;
  }
  .tips {
    width: 375px;
    @apply text-sm text-[#BB9531];
  }
  .sub-tips {
    @apply text-xs text-[#8F9299] opacity-60;
  }
  .coin-btn {
    width: 120px;
    height: 32px;
    border-radius: 32px;
    color: #e1c781;
    border: 1px solid #e1c781;
    .coin-icon {
      font-size: 12px;
      color: #e1c781;
      margin-right: 8px;
    }
    .charge {
      line-height: 32px;
    }
  }
  .buy-btn {
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    font-size: 12px;
    color: #000;
    font-weight: 500;
    background-image: linear-gradient(135deg, #ffe9a2 0%, #f2cc61 100%);
  }
}
</style>
